<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> 任务日志</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input
          placeholder="任务名称"
          class="mr10 handle-input"
          size="medium"
          v-model="search.taskName"
        ></el-input>
        <el-button
          class="mr10 ml10"
          type="primary"
          size="medium"
          icon="el-icon-search"
          @click="currentChange"
          >搜索</el-button
        >
        <el-button
          class="mr10"
          icon="el-icon-refresh"
          size="medium"
          @click="refresh"
          >刷新</el-button
        >
      </div>

      <el-table
        :loading="loading"
        :data="page.records"
        style="width: 100%"
        @sort-change="sortChange"
      >
        <el-table-column
          prop="taskLogId"
          label="任务日志ID"
          width="180"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="taskName"
          label="任务名"
          width="180"
          sortable="custom"
        >
        </el-table-column>

        <el-table-column
          prop="clientIp"
          label="客户端IP"
          width="180"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" sortable="custom">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" sortable="custom">
        </el-table-column>
        <el-table-column label="状态" sortable="custom" prop="logStatus">
          <template slot-scope="scope">
            <el-tag :type="scope.row.logStatus == 1 ? 'success' : 'danger'">
              {{ scope.row.logStatus == 1 ? "成功" : (scope.row.logStatus==0?"执行中":"失败" )}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="logMsg" label="失败原因" >
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next"
        :total="page.total"
        :page-size="page.size"
        :page-count="page.total / page.size"
        :current-page.sync="page.current"
        class="mt10"
        @current-change="currentChange()"
      >
      </el-pagination>
    </div>
  </div>
</template>

  <script>
import { listTaskLog } from "@/api/index";
export default {
  data() {
    return {
      formLabelWidth: "120px",
      defaultSearch: {
        taskName: "",
      },
      search: {
        taskName: "",
      },
      loading: true,
      page: {
        total: 0,
        size: 10,
        current: 1,
        records: [],
        orders: [
          {
            column: "start_time",
            asc: false,
          },
        ],
      },
    };
  },
  methods: {
    // 排序
    sortChange(e) {
      console.log(e);
      switch (e.prop) {
        case "taskLogId":
          this.page.orders[0] = {
            column: "task_log_id",
            asc: e.order == "ascending" || e.order == null ? true : false,
          };
          break;
        case "taskName":
          this.page.orders[0] = {
            column: "task_name",
            asc: e.order == "ascending" || e.order == null ? true : false,
          };
          break;
        case "clientIp":
          this.page.orders[0] = {
            column: "client_ip",
            asc: e.order == "ascending" || e.order == null ? true : false,
          };
          break;
        case "startTime":
          this.page.orders[0] = {
            column: "start_time",
            asc: e.order == "ascending" || e.order == null ? true : false,
          };
          break;
        case "endTime":
          this.page.orders[0] = {
            column: "end_time",
            asc: e.order == "ascending" || e.order == null ? true : false,
          };
          break;
        case "taskLogStatus":
          this.page.orders[0] = {
            column: "task_log_status",
            asc: e.order == "ascending" || e.order == null ? true : false,
          };
          break;
      }
      if (e.order == null) {
        this.page.orders[0] = {
          column: "start_time",
          asc: false,
        };
      }
      this.currentChange();
    },
    //刷新
    refresh() {
      this.search = Object.assign({}, this.defaultSearch);
      var that = this;
      this.currentChange(function () {
        that.$message({ message: "刷新成功", type: "success" });
      });
    },
    //换页
    currentChange(func) {
      console.log(this.page);
      var page = Object.assign({}, this.page);
      page.records = [this.search];
      this.listData(page, func);
    },
    //查询列表
    listData(page, func = function () {}) {
      listTaskLog({ data: page }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.page = res.data.data;
          func();
        }
        this.loading = false;
      });
    },
  },
  mounted() {
    this.loading = true;
    console.log("mounted");
    var page = Object.assign({}, this.page);
    page.records = [this.search];
    this.listData(page);
  },
  created() {
    this.listApp();
  },
};
</script>

<style scoped>
.mr10 {
  margin-right: 10px;
}
.ml10 {
  margin-left: 10px;
}
.mt10 {
  margin-top: 10px;
}
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
</style>
